<template>
  <div class="pa-1">
    <v-layout column class="hidden-sm-and-down">
      <v-flex xs12 sm12 md12 lg12>
        <h3 class="title font-weight-bold ma-4" ><span color="primary">媒体报道</span></h3>
      </v-flex>
      <v-card v-for="(item, index) in data" :key="index" class="pa-3" flat :to="'/detail/' + item.id">
        <v-layout row>
          <v-flex md5>
            <v-card-media :src="MImage(item.image)" height="130px"></v-card-media>
          </v-flex>
          <v-flex md7>
            <v-card-title>
              <h4 class="d-flex">{{index + 1}}. {{item.title}}</h4>
              <span class="subheading mr-2">{{item.updatetime.slice(0,10)}}</span>
              <span>{{MOverview(item.content, 40)}}</span>
            </v-card-title>
          </v-flex>
        </v-layout>
      </v-card>
    </v-layout>
    <v-list two-line class="hidden-md-and-up" dense>
      <v-subheader class="title font-weight-bold">媒体报道</v-subheader>
      <v-divider></v-divider>
      <template v-for="(item, index) in data">
        <v-list-tile :key="index" :to="'/detail/' + item.id" >
          <v-list-tile-avatar tile>
            <img :src="MImage(item.image)">
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>{{index + 1}}. {{item.title}}</v-list-tile-title>
            <v-list-tile-sub-title>
              <span class="mr-2">{{item.updatetime.slice(0,10)}}</span>{{MOverview(item.content, 20)}}
            </v-list-tile-sub-title>
          </v-list-tile-content>
        </v-list-tile>
      </template>
    </v-list>
  </div>
</template>
<script>
export default {
  name: 'Notics',
  props: {
    data: {
      type: Array,
      default: [
        { id: 1, title: '标题标题标题', date: '2018-7-8', content: 'dasdas', image: 'https://www.sx-cc.com/d/file/content/2018/07/thumb_211_150_5b55a3779ab61.jpg' },
        { id: 1, title: '标题标题标题', date: '2018-7-8', content: 'dasdas', image: 'https://www.sx-cc.com/d/file/content/2018/07/thumb_211_150_5b55a3779ab61.jpg' },
        { id: 1, title: '标题标题标题', date: '2018-7-8', content: 'dasdas', image: 'https://www.sx-cc.com/d/file/content/2018/07/thumb_211_150_5b55a3779ab61.jpg' }
      ]
    }
  },
  data () {
    return {
    }
  },
  created: function () {
  }
}
</script>
